<template>
  <div id="app" ref="app">
    <!-- <div id="nav"> -->
    <!-- <router-link to="/">Home</router-link> 
     <router-link to="/thirdTest">About</router-link> 
     <router-link to="/fourTest">four</router-link> -->
    <!-- </div> -->
	<div id="preload" ref="preload" v-show="pre">加载中。。。<span>0%</span></div>
	<!-- <img src="../images/btn_icon_06.png" alt=""> -->
    <router-view/>
  </div>
</template>

<script>
	export default {
		// data(){
		// 	return {
		// 		pre:true
		// 	}
		// },
		props:{
			pre:Boolean
		},
		beforeCreate() {
			var imgList = [
				"../images/bg.jpg",
				"../images/btn_icon_06.png",
				"../images/circular_03.png",
				"../images/left_tree02.png",
				"../images/logo_03.png",
				"../images/marks_03.png",
				"../images/photo_bg_03.png",
				"../images/photo_img_03.jpg",
				"../images/pika_right_03.png",
				"../images/pikaqiu_logo_03.png",
				"../images/right_tree_03.png",
				"../images/scan_icon_03.png",
				"../images/touxiang_03.png",
				"../images/tuku_03.png",
				"../images/xiangkuang.png"
			]
			var preload_obj = {
				ele:document.querySelector("#preload"),
				ele_text:document.querySelector("#preload>span"),
				n:0, // 用来记录成功执行onload事件的成员
				sum:imgList.length
			}
			
			imgList.forEach((ele,index)=>{
				var image = new Image();
				image.src = ele;
				let that = this
				image.onload = function(){
					console.log(index)
					preload_obj.n++;
					let now_n = parseInt(preload_obj.n / preload_obj.m *100);
					preload_obj.ele_text.innerHTML = now_n + "%"
					if(preload_obj.n == preload_obj.m){
						console.log("所有的图片加载完成")
						setTimeout(function(){
							// preload_obj.ele.style.display="none";
							that.pre = false
						},500)
					}
				}
			})
		},
		created() {
			// 1.获取地址栏上的type的参数
			const type = this.$route.query.type;
			// 2.将type值，设置 到仓库中
			this.$store.commit('set_type',type || "1");
		}
	}
</script>

<style>
#preload{
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	font-size: 20px;
	z-index: 10;
	color: #fff;
	background-color: green;
}
a {
  /* font-weight: bold; */
  color: #2c3e50;
  font-size: 14px;
  padding-left: 20px;
  padding-right: 20px;
}

/* #nav a.router-link-exact-active {
  color: #42b983;
} */
</style>
